// 初始化可视化图表
function initCharts() {
    // 默认隐藏所有图表容器
    document.querySelectorAll('.chart-container').forEach(chart => {
        chart.style.display = 'none';
    });
    // 添加导航栏点击事件监听
    document.querySelectorAll('.sidebar li').forEach(item => {
        item.addEventListener('click', () => {
            const chartId = item.dataset.chart;
            // 隐藏所有图表
            document.querySelectorAll('.chart-container').forEach(chart => {
                chart.style.display = 'none';
            });
            // 显示当前选中的图表
            document.getElementById(`${chartId}-chart`).style.display = 'block';
        });
    });

    // 获取核心指标数据
    fetch('/api/metrics')
        .then(res => res.json())
        .then(metrics => {
            // 渲染核心指标卡片
            const metricGrid = document.querySelector('.metric-grid');
            Object.entries(metrics).forEach(([key, value]) => {
                const card = document.createElement('div');
                card.className = 'metric-card';
                card.innerHTML = `<h3>${key}</h3><p>${value}</p>`;
                metricGrid.appendChild(card);
            });
        });

    // 价格-销量关系图
    const priceSalesChart = echarts.init(document.getElementById('price-sales-chart'));
    fetch('/api/price-sales')
        .then(res => res.json())
        .then(data => {
            priceSalesChart.setOption({
                title: { text: '价格与销量关系分析' },
                xAxis: { name: '价格（万元）', type: 'value' },
                yAxis: { name: '销量（辆）', type: 'value' },
                series: [{
                    type: 'scatter',
                    data: data,
                    symbolSize: 8,
                    itemStyle: { opacity: 0.3 }
                }]
            });
        });

    // 品牌市场份额饼图
    const brandShareChart = echarts.init(document.getElementById('brand-share-chart'));
    fetch('/api/brand-share')
        .then(res => res.json())
        .then(data => {
            brandShareChart.setOption({
                title: { text: '品牌市场份额' },
                tooltip: { formatter: '{b}: {d}%' },
                series: [{
                    type: 'pie',
                    radius: '60%',
                    data: data,
                    emphasis: { itemStyle: { shadowBlur: 10 } }
                }]
            });
        });

    // 区域分布柱状图
    const regionChart = echarts.init(document.getElementById('region-distribution-chart'));
    fetch('/api/region-distribution')
        .then(res => res.json())
        .then(data => {
            regionChart.setOption({
                title: { text: '区域销量分布' },
                xAxis: { type: 'category', data: data.categories },
                yAxis: { type: 'value' },
                series: [{
                    type: 'bar',
                    data: data.values,
                    itemStyle: { color: '#5470c6' }
                }]
            });
        });
}

// 续航-价格分析折线图
const rangePriceChart = echarts.init(document.getElementById('range-price-chart'));
fetch('/api/range-price')
    .then(res => res.json())
    .then(data => {
        rangePriceChart.setOption({
            title: { text: '续航里程与价格关系' },
            xAxis: { name: '续航里程（km）', type: 'value' },
            yAxis: { name: '平均价格（万元）', type: 'value' },
            series: [{
                type: 'line',
                data: data,
                smooth: true,
                itemStyle: { color: '#91cc75' }
            }]
        });
    });

// 初始化显示首个图表
window.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.chart-container').forEach((chart, index) => {
        chart.style.display = index === 0 ? 'block' : 'none';
    });
    initCharts();
});